<script setup lang="ts">
import { onMounted } from "vue";
const random = function () {
    let arr: any = [];
    for (let i = 0; i < 30; i++) {
        arr.push(Math.round(Math.random() * 100));
    }
    return arr;
};
const random_ = function () {
    let arr: Array<any> = [];
    for (let i = 0; i < 50; i++) {
        arr.push(random());
    }
    return arr;
};
// let arr_ =
onMounted(() => {
    const chart = echarts.init(document.getElementById("chart") as any);
    chart.setOption({
        grid: {
            left: "5%",
            right: "1%",
            top: "10%",
            bottom: "10%"
        },
        xAxis: {
            splitLine: {
                show: false
            },
            axisLabel: {
                fontSize: 8
            },
            data: random()
        },
        yAxis: {
            splitLine: {
                show: false
            },
            axisLabel: {
                fontSize: 8
            }
        },
        series: [
            {
                lineStyle: {
                    opacity: 0
                },
                type: "candlestick",
                data: random_()
            }
        ]
    });
});
</script>
<template>
    <div class="card flex-1-1 d-flex flex-column">
        <div class="d-flex mt-4 mb-1">
            <div class="d-flex lef">
                <img class="icon" src="@/assets/dine.png" />
                <span class="c-title-5 ml-1 mr-2"
                    >Bitcoin
                    <span style="color: var(--color)">(BTC)</span>
                </span>
            </div>
            <div class="d-flex rig ml-2">
                <span class="c-title-5" style="color: var(--color)"
                    >价格
                    <span class="c-title-4 c-bold ml-1" style="color: white">$366,374k</span>
                </span>
            </div>
        </div>
        <div id="chart" class="flex-1-1"></div>
        <p class="c-title-5 tisp" style="color: var(--color)">ChainingView.com</p>
    </div>
</template>
<style scoped lang="less">
.card {
    .lef {
        // background-color: green;
        align-items: center;
        border-right: 1px solid var(--border);

        .icon {
            --wh: 24px;
            width: var(--wh);
            height: var(--wh);
        }
    }

    .rig {
        align-items: center;
    }
    // #chart{
    //     background-color: yellowgreen;
    // }
}
</style>
